<template>
  <div>
    <article class="main-breadcrumb">
      <el-breadcrumb separator="/" class="main-breadcrumb-wrap">
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">设备综合管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">生命周期管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-sp">学习资源</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </article>
    <div class="nx-content">
      <el-tabs v-model="activeName">
        <el-tab-pane label="学习视频" name="first">
          <TabFirst />
        </el-tab-pane>
        <el-tab-pane label="学习资料" name="second">
          <TabSecond />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import TabFirst from './showVideo.vue'
import TabSecond from './learnMaterial.vue'
export default {
  components: {
    TabFirst,
    TabSecond
  },
  props: {},
  data() {
    return {
      activeName: 'first'
    }
  },
  mounted() {
    if (this.$route.query.activeName) {
      this.activeName = this.$route.query.activeName
    }
  },
  // 自定义方法
  methods: {}
}
</script>
<style lang="less" scoped>
.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;
  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;
    .main-breadcrumb-home {
      cursor: pointer;
      color: #666666;
      font-weight: bold;
    }
    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}
</style>